<template>
  <div id="userinfo">
    <Header :user_img="userdata.user_img"/>
    <div class="backImg"></div>
    <UserDetails
      :userInfo="userdata"
      @editClick="$router.push('/edit')"
    />
  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import UserDetails from "@/components/userinfo/userDetails.vue";

export default {
  components: {
    Header,
    UserDetails,
  },
  data() {
    return {
      userdata: {},
    };
  },
  methods: {
    /* 获取用户信息 */
    async userInfoData() {
      let res = await this.$http.get(`/user/${localStorage.getItem("id")}`);
      this.userdata = res.data[0];
    },
  },
  created() {
    this.userInfoData();
  },
};
</script>

<style lang="less" scoped>
#userinfo {
  .backImg {
    height: 36.111vw;
    width: 100%;
    background: url("../assets/backImg.jpeg") no-repeat;
    background-size: cover;
  }
}
</style>
